<template>
  <view class="contact-card">
    <image :src="contactParams.pic || avatarImg" mode="scaleToFill" class="contact-avatar" style="width:120rpx;height:120rpx" />
    <view class="c-title">{{contactParams.name}}家长的联系方式</view>
    <view class="c-text">{{contactParams.childInfo}}</view>

    <view class="c-phone">{{fullPhone || phoneNumber}}</view>

    <view class="c-btns" v-if="fullPhone">
      <custom-btn class="c-btn" @click="callPhone">
        <template #icon>
          <image src="@/static/index/phone.svg" mode="scaleToFill" class="c-icon" />
        </template>
        拨打电话
      </custom-btn>
      <custom-btn class="c-btn c-copy-btn" @click="copyPhone">复制手机号码</custom-btn>
      <view class="error-tips" @click="toError">电话打不通，怎么办？</view>
    </view>

    <template v-else>
      <view class="c-btn" @click="unLockFn"><custom-btn>立即免费解锁</custom-btn></view>
      <template v-if="lookObj?.ci_num && lookObj?.member_num">
        <view class="c-num">将消耗1个联系名额</view>
        <view class="c-num">
          <text v-if="lookObj?.ci_num">次卡剩余{{lookObj?.ci_num}}次</text>
          <text v-if="lookObj?.member_num">，会员今日剩余{{lookObj?.member_num}}次</text>
        </view>
      </template>
      <view class="c-num" v-else>将消耗1个联系名额
        <text v-if="lookObj?.ci_num">，次卡剩余{{lookObj?.ci_num}}次</text>
        <text v-else-if="lookObj?.member_num">，会员今日剩余{{lookObj?.member_num}}次</text>
        <text v-else>，剩余0个</text>
      </view>
    </template>

  </view>
</template>

<script setup>
// 引入api
import useStore from "@/store";
import { getItem } from "@/utils/storage";
import avatarImg from "@/static/common/avatar.svg";
const { common, person } = useStore();

const refreshFn = inject("refreshFn", () => {});
// 完整手机号
const fullPhone = computed(() => person.fullPhone);
const contactParams = computed(() => common.contactParams);
const phoneNumber = computed(() => contactParams.value?.phone);
const lookObj = computed(() => contactParams.value?.lookObj);

// 立即解锁
const unLockFn = () => {
  person.getPhone(common.contactParams.id).then((res) => {
    // 更新解锁状态
    refreshFn(common.contactParams.id, 1);
  });
};

// 拨打电话
const callPhone = () => {
  uni.makePhoneCall({
    phoneNumber: fullPhone.value,
    success: (res) => {
      console.log("拨打电话", res);
    },
    fail: (err) => {
      console.log("拨打失败", err);
    },
  });
};

// 复制手机号
const copyPhone = () => {
  uni.setClipboardData({
    data: fullPhone.value,
    success: function () {
      uni.showToast({
        title: "复制成功",
        icon: "none",
      });
    },
    fail: function (err) {
      console.log("err", err);
    },
  });
};

const toError = () => {
  common.updatePopupOpen(false, "contact");
  setTimeout(() => {
    uni.navigateTo({ url: "/subPages/error/index" });
  }, 50);
};
</script>

<style lang=scss scoped>
.contact-card {
  background: #fff;
  border-radius: 30rpx;
  text-align: center;
  padding: 60rpx 40rpx;
  position: relative;

  .contact-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 120rpx;
  }
  .c-title {
    font-weight: 800;
    font-size: 40rpx;
    color: #000;
    padding: 20rpx 0 10rpx;
  }

  .c-text {
    font-weight: 500;
    font-size: 32rpx;
    color: #666;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #ddd;
  }

  .c-phone {
    font-weight: 800;
    font-size: 64rpx;
    color: #000;
    padding-bottom: 20rpx;
    padding-top: 36rpx;
  }
  .c-tips {
    font-weight: 500;
    font-size: 28rpx;
    color: #f65952;
    padding-bottom: 20rpx;
  }
  .c-num {
    font-weight: 500;
    font-size: 28rpx;
    color: #f65952;
    margin-top: 20rpx;
  }

  .c-icon {
    width: 48rpx;
    height: 48rpx;
    margin-right: 20rpx;
  }

  .c-btn {
    width: 530rpx;
    height: 120rpx;
    line-height: 120rpx;
    background: #f65952;
    border-radius: 120rpx;
    margin: 0 20rpx;
    font-weight: 500;
    font-size: 36rpx;
    color: #fff;
  }

  .c-btns {
    display: flex;
    flex-direction: column;
    padding-top: 14rpx;
  }

  .c-copy-btn {
    border: 4rpx solid #f65952;
    background: #fff;
    font-weight: bold;
    font-size: 36rpx;
    color: #f65952;
    margin-top: 20rpx;
  }

  .error-tips {
    font-weight: 800;
    font-size: 32rpx;
    color: #fff;
    text-align: center;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -60rpx;
  }
}
</style>